import React, { useState, useEffect } from 'react'
import { Search } from '@nutui/icons-react'
import axios from "axios"
import "./home.css"
import { useNavigate } from 'react-router-dom'
export default function Zhuanti() {
    let navigate = useNavigate()
    const [list, setList] = useState([])
    useEffect(() => {
        getlist()
    }, [])
    let getlist = async () => {
        let res = await axios.get('http://localhost:3000/getcate')
        setList(res.data.list)
    }
    return (
        <div>
            {/* 头部 */}
            <div className='header1'>
                <h1 style={{ lineHeight: "65px", marginLeft: "2%" }} onClick={()=>navigate("/app/home")}>←</h1>
                <h1 style={{ lineHeight: "65px" }}>精选专题</h1>
                <span style={{ marginTop: "20px" }}><Search height="25px" width="25px" onClick={()=>navigate("/search")}/>&nbsp;&nbsp;&nbsp;</span>
            </div>
            <div style={{ width: "100%", height: "75px" }}></div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "10px", paddingTop: "5%",  }}>
                {
                    list.map(item => (
                        <div key={item.id} style={{ width: "100%", height: "auto", padding: "5%", boxSizing: "border-box",marginBottom:"2%" }} onClick={()=>navigate(`/zhuanxiang?id=${item._id}`)}>
                            <img src={item.img} alt='' style={{ width: "100%", height: "70%", objectFit: "cover" }} />
                            <p style={{ textAlign: "center", marginTop: "5%", fontWeight: "bolder" }}>{item.name}</p>
                        </div>
                    ))
                }
            </div>
        </div>
    )
}
